<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<form class="form-horizontal" action="/photo/upload" enctype="multipart/form-data" method="post" id="formUpload">
    <fieldset>
    <div id="legend" class=""><legend class="">上传本地图片</legend></div>
        
    	<div class="control-group">
          <label class="control-label">上传本地图片：</label>
          <div class="controls">
            	<input class="input-file" id="fileInput" type="file" name="photo">
          </div>
        </div>
        <div class="control-group">
          <div class="controls">
            <div id="div_img"><img  id="local_img" src="${photo.localurl }" style="height: 109px;width: 250px;"/></div>
            <div class="progress progress-striped active" id="process" style="display: none;width: 250px;">
  				<div class="bar"></div>
			</div>
          </div>
        </div>
        </fieldset>
 </form>
 

 
<form class="form-horizontal" action="/photo/save" method="post" id="formPhoto">
  		<input type="hidden" value="${photo.id }" name="id"/>
		<input type="hidden" name="localurl" id="localurl" value="${photo.localurl }"/>
   <fieldset>
   
		<div class="control-group">
          <label class="control-label">名称：</label>
          <div class="controls">
            <input class="input-xlarge" type="text" name=title value="${photo.title }">
          </div>
        </div>   
        
        <div class="control-group">
          <label class="control-label">网络图片地址：</label>
          <div class="controls">
            <input class="input-xlarge" type="text" name=neturl value="${photo.neturl }">
          </div>
        </div>
        
        <c:if test="${not empty photo.neturl }">
	        <div class="control-group">
	          <label class="control-label">网络图片：</label>
	          <div class="controls">
	            <img alt="" src="${photo.neturl }" style="height: 109px;width: 250px;">
	          </div>
	        </div>
        </c:if>
        
       <div class="control-group">
          <label class="control-label">广告链接：</label>
          <div class="controls">
            <input class="input-xlarge"  type="text" name="site" value="${photo.site }">
          </div>
        </div> 
    <div class="control-group">
          <label class="control-label"></label>
          <div class="controls">
            <button class="btn btn-default" type="submit">确定</button>
          </div>
        </div> 
     </fieldset>  
 </form>

 


<div id="status"></div>
<script type="text/javascript">
   $(document).ready(function() {
	   $('#fileInput').on("change",function(){
		   $('#formUpload').submit();
	   });
	   $("#formPhoto").validate({
			rules: {
				title: {required:true,maxlength:30},
			},
			messages: {
				title: {required:"请填写标题",maxlength:"标题不能长于30个字"},
			}
		});
	   
	   $('#formUpload').ajaxForm({
		   beforeSubmit:function(){
				$('#process').show();
				return $('#formUpload').validate().form();
			},
			uploadProgress: function(event, position, total, percentComplete) {
		        var percentVal = percentComplete + '%';
		        $('.bar').width(percentVal)
		    },
			success:function(data){
				$('#local_img').attr("src",data.localurl);
				$('#localurl').val(data.localurl);
				//$('#process').hide();
			},
			complete: function(xhr) {
				$('#process').hide();
			}
		});
	   
	   $('#formPhoto').ajaxForm({
			success:function(){
				$('#div_right').load("/photo/manage");
			}
		});
   });
</script>
